<template>
	<div class="body">
		<!-- 第一个白框 -->
		<view class="message">
			<p class="name">张三三</p>
			<p class="phone">13512341234</p>
			<img  class="add" src="../../static/add_03.gif" alt="">
			<p class="ess">青岛市崂山区同和路728号 金光丽园2-2-101</p>
			<img  class="btn" src="../../static/button_03.gif" alt="">
		</view>
		<!-- 第二个白框 -->
		
		<view class="tong">
			<view >
			    <img src="../../static/7_13.gif" alt="">
			</view >
			<view class="t2">
				<p class="title">崂山矿泉水崂山矿泉水崂山矿泉水</p>
				<p class="money">￥18</p>
				<p class="number">*5</p>
			</view>
		</view>
		
		<!-- 第三个白框 -->
		<view class="san">
			<view class="jifen">
				<p class="p1">积分:</p>
				<p class="p2">暂无积分</p>
			</view>
			
			<view class="fangshi">
				 <view class="section__title">购买方式:</view>
				    <radio-group name="radio-group">
						<label><radio value="radio1"/>立即送达</label>
						<label><radio value="radio2"/>购买水票</label>
				    </radio-group>
			</view>
		    
			
			<view class="zonge">
				<p class="p1">总额:</p>
				<p class="p2">￥900</p>
			</view>
		</view>
		<!-- 下一步 -->
		<view class="last">
			<navigator url="zhifufangshi" hover-class="navigator-hover"><button>下一步</button></navigator>
		</view>
		
	</div>
</template>

<script>
</script>

<style>
	/* *{
			box-sizing: border-box;
	} */
	.body{
		width: 100%;
		height: 37.63rem;
		background: #eee;
		overflow: hidden;
		/* display: flex; */
	}
		
	.message,.tong,.san{
		width: 19.18rem;
		/* align-content:space-around; */
		
		/* display: flex; */
	}
	/* 第一个的样式 */
	.message .name{
		left: 1.94rem;
		top: 6.19rem;
		width: 2.62rem;
		height: 1.25rem;
		color: rgba(34, 34, 34, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 1.31rem;
		padding-top:1.38rem;
		overflow: hidden;

	}
	.message .phone{
		left: 5.44rem;
		top: 6.19rem;
		width: 5.81rem;
		height: 1.25rem;
		color: rgba(34, 34, 34, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 4.81rem;
		margin-top:-1.31rem;

	}
	
	.message .add{
		margin-left: -17.12rem;
		margin-top: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		background-color: rgba(59, 156, 219, 1);
		/* margin-left: 26px; */

	}
	.message .ess{
		margin-left: 2.39rem;
		margin-top: -1.38rem;
		width: 15.31rem;
		height: 1.06rem;
		color: rgba(34, 34, 34, 1);
		font-size: 0.625rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.message .btn{
		/* left: 320px;
		top: 112px; */
		float: right;
		margin-top:-2.5rem;
		margin-right: 0.94rem;
		width: 1.88rem;
		height: 1.88rem;
		background-color: rgba(238, 238, 238, 1);

	}
	.message{
		margin-left: 0.33rem;
		margin-top: 0.94rem;
		/* width: 22.19rem; */
		height: 6.81rem;
		line-height: 1.25rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
	}
	/* 第二个的样式 */
	.tong{
		margin-left: 0.33rem;
		margin-top: 0.93rem;
		height: 8.69rem;
		/* line-height: 1.25rem; */
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		overflow: hidden;
		display: flex;

	}
	/* .t1,.t2{
		justify-content: space-between;
	} */
	
	.tong img{
		height:6.75rem;
		width: 6.75rem;
		margin-left: 0.625rem;
		margin-top: 0.93rem;
	
	}
	.tong .title{
		height: 2.81rem;
		width: 11rem;
		color: rgba(16, 16, 16, 1);
		margin-top: 1rem;
		/* margin-left: 15rem; */
		font-size: 0.93rem;
		font-family: PingFangSC-regular;
		
	}
	.tong .money{
		width: 3.31rem;
		height: 1.62rem;
		line-height: 1.62rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.25rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 1rem;
		margin-top:0.625rem;
	}
	.tong .number{
		width: 1rem;
		height: 1.25rem;
		line-height: 16px;
		color: rgba(171, 171, 171, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 4rem;
		margin-top:-1.37rem;
	}
	/* 第三个的样式 */
	.san{
		margin-left: 0.33rem;
		margin-top: 1.37rem;
		/* width: 22.19rem; */
		height: 8.37rem;
		line-height: .25rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;

	}
	.san .jifen{
		border-bottom:1px solid #eee;
		height: 2.5rem;
		line-height: 2.5rem;
		/* display: flex; */
	}
	.san .jifen p{
		/* justify-content: space-between; */
	}
	.san .jifen .p1{
		margin-left: 2.62rem;
		margin-top: 1.12rem;
		width: 2.62rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.san .jifen .p2{
		margin-left: 13.29rem;
		margin-top: -1.25rem;
		width: 3.7rem;
		height: 1.25rem;
		color: rgba(153, 153, 153, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.san .fangshi{
		border-bottom:1px solid #eee;
		height: 2.5rem;
		line-height: 2.5rem;
	}
	.san .fangshi .section__title{
		/* left: 34px;
		top: 402px; */
		margin-left: 1.5rem;
		margin-top: 0.63rem;
		width: 4.37rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.san .fangshi radio-group{
		margin-left: 5rem;
		margin-top:-1.67rem;
	}
	.san .fangshi label{
		margin-left: 0.62rem;
		width: 9.06rem;
		height: 1.67rem;
		color: rgba(153, 153, 153, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.san .zonge p{
		float: left;
	}
	.san .zonge .p1{
		/* left: 62px;
		top: 443px; */
		margin-top:0.63rem;
		margin-left: 2.62rem;
		width: 2.62rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.san .zonge .p2{
		left: 17.63rem;
		top: 27.62rem;
		width: 3.5rem;
		height: 1.75rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.25rem;
		text-align: left;
		font-family: PingFangSC-bold;
        float: right;
		margin-right: 1.68rem;
		margin-top: 0.62rem;
	}
	.last button{
		margin-top:6.75rem;
		width: 19.25rem;
		height: 2.5rem;
		line-height: 2.5rem;
		background-color: #3B9CDB;
		color: #fff;
	}
	
</style>
